<template>
  <div>
    <div class="comment" :class="{ height: isActive }" v-cloak>
      <textarea
        v-model="content"
        v-foues
        placeholder="友善是交流的起点"
      ></textarea>
      <div class="comment-div">
        <i
          class="iconfont"
          :class="[isActive ? 'icontuichuquanping' : 'iconfangda']"
          @click="amplification"
        ></i>
        <span @click="publish">发布</span>
      </div>
    </div>
    <div class="shade" @click="close"></div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from "vuex";
import { getItem } from "../../utils/sessiton";
export default {
  props: {
    item: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isActive: false,
      content: "",
    };
  },
  computed: {},
  methods: {
    ...mapMutations("msbd", ["SET_DETAILCOMMENT"]),
    ...mapActions("discuss", ["getDiscuss", "getDiscussList"]),
    close() {
      this.SET_DETAILCOMMENT(false);
    },
    amplification() {
      this.isActive = !this.isActive;
    },
    async publish() {
      if (this.content.trim() == "") {
        return;
      }
      await this.getDiscuss({
        content: this.content,
        uid: getItem().id,
        bdid: this.item,
      });
      this.SET_DETAILCOMMENT(false);
      this.getDiscussList(this.item);
      this.content = "";
      this.$toast('发布成功',3000,50,'iconxiangmufangan-baoyang-duigou')
    },
  },
  directives: {
    foues: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style scoped>
.comment {
  height: 100px;
  background-color: #ffff;
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  z-index: 9999;
  position: fixed;
  transition: height 1s;
  bottom: 0;
}

.height {
  height: 350px;
}

.comment textarea {
  resize: none;
  width: 66%;
  outline: none;
  border: 0;
  background-color: #eeeeee;
  padding: 10px;
}

.comment-div {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: column;
}

.comment-div i {
  font-size: 35px;
}

.comment-div span {
  font-size: 19px;
}

.shade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}
</style>